<template>
  <view class="home">
    <form-item :form-json="formJson">
      <template #action={form}>
        <view class="action-bar">
          <view class="u-flex-y-center u-m-b-20">
            <image src="@/static/images/01_18mj.png" @click="changeAgree" class="login-img" v-if="data.checkd" mode="">
            </image>
            <image src="@/static/images/01_18efd.png" @click="changeAgree" class="login-img" v-else mode="">
            </image>
            <view class="u-text-center login-text">
              <text>阅读并同意</text>
              <text @click="$u.route('/pages/index/agreement?type=3')"> 《用户协议》</text>
              <text @click="$u.route('/pages/index/agreement?type=4')">《隐私政策》</text>
            </view>
          </view>
          <up-button type="warning" shape="circle" color="#F87610" @click="_extract(form)">立即提现</up-button>
        </view>
      </template>
    </form-item>
  </view>
</template>

<script setup>
  import {
    ref
  } from 'vue';
  import { extract } from '../../config/api';
  const formJson = ref([{
    label: '姓名',
    placeholder: '请输入姓名',
    key: 'real_name',
    type: 'text',
    border: true
  }, {
    label: '身份证号',
    placeholder: '请输入身份证号',
    key: 'id_card',
    type: 'text',
    border: true
  }, {
    label: '银行名称',
    placeholder: '请输入银行名称',
    key: 'bank',
    border: true,
    type: 'text'
  }, {
    label: '卡号',
    placeholder: '请输入银行卡号',
    key: 'bank_card',
    type: 'text',
    border: true
  }, {
    label: '银行预留手机号',
    placeholder: '请输入银行预留手机号',
    key: 'phone',
    type: 'text',
    border: true
  }, {
    label: '提现金额',
    placeholder: '请输入提现金额',
    key: 'money',
    type: 'text',
    border: true,
    maxlength: '11'
  }])
  const data = ref({
    checkd: false
  })
  const changeAgree = () => {
    data.value.checkd = !data.value.checkd
  }
  // 提现
  const _extract = (form) => {
    if (!data.value.checkd) {
      uni.$u.toast('请阅读并同意用户协议')
      return
    }
    extract(form).then(res => {
      console.log(res)
      uni.$u.toast(res.msg)
      setTimeout(() => {
        uni.navigateBack()
      }, 500)
    })
  }
</script>

<style lang="scss" scoped>
  .home {
    background: #fff;
    min-height: 100vh;

    ::v-deep .u-form-item__body__left__content__label {
      font-size: 30rpx;
      font-weight: 500;
    }

    ::v-deep .u-form-item__body {
      padding: 35rpx 20rpx;
    }

    ::v-deep .u-form-item__body__left__content__required {
      left: auto;
      right: -12rpx;
    }

    ::v-deep .u-cell__body {
      padding: 35rpx 0;
    }
  }

  .action-bar {
    padding: 30rpx;
    padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    z-index: 9;

    image {
      width: 24rpx;
      height: 24rpx;
      margin-right: 10rpx;
    }

    text+text {
      color: #F87610;
    }
  }
</style>